<template>
  <div class="home">
    <Popover></Popover>
    <Echarts :option="option1" class="my-chart"></Echarts>
    <Echarts :option="option2" class="my-chart"></Echarts>
    <Echarts ref="mychart3" :option="option3" class="my-chart"></Echarts>
    <Echarts ref="mychart4" :option="option4" class="my-chart"></Echarts>
    <Echarts :option="option5" class="my-chart"></Echarts>
    <Echarts :option="option6" class="my-chart"></Echarts>
    <Echarts :option="option7" class="my-chart"></Echarts>
    <Echarts :option="option8" class="my-chart"></Echarts>
    <Echarts :option="option9" class="my-chart"></Echarts>
    <Echarts :option="option10" class="my-chart"></Echarts>
    <Echarts :option="option11" class="my-chart"></Echarts>
    <Echarts :option="option12" class="my-chart"></Echarts>
    <Echarts :option="option13" class="my-chart"></Echarts>
    <Echarts ref="mychart14" :option="option14" class="my-chart"></Echarts>
    <Echarts :option="option15" class="my-chart"></Echarts>
  </div>
</template>
<script>
// import *as echarts from 'echarts'
import Echarts from './echarts.vue'
import Popover from '../el-popover/popover.vue'
import { option1,option2,option3,option4,option5,option6,option7,option8,option9,option10,option11,option12,option13,option14,option15 } from './option'
export default{
  name:'Home',
  components:{
    Echarts,Popover
  },
  data(){
    return{
      option1:option1,
      option2:option2,
      option3:option3,
      option4:option4,
      option5:option5,
      option6:option6,
      option7:option7,
      option8:option8,
      option9:option9,
      option10:option10,
      option11:option11,
      option12:option12,
      option13:option13,
      option14:option14,
      option15:option15
    }
  },
  created(){

  },
  mounted(){
    console.log(this.$refs.mychart3.chart);
    setInterval(() => {
      this.update()
    }, 3000);
    this.setOption4()

    // 数据过渡动画效果
    setInterval(() => {
      this.$refs.mychart14.chart.setOption({
        series: {
          data: this.makeRandomData()
        }
      });
    }, 2000);
  },
  methods:{
    // 动态效果（第三张图）
    update(){
      var data = option3.series[0].data;
      for (var i = 0; i < data.length; ++i) {
        if (Math.random() > 0.9) {
          data[i] += Math.round(Math.random() * 2000);
        } else {
          data[i] += Math.round(Math.random() * 200);
        }
      }
      this.$refs.mychart3.chart.setOption(option3);
    },
    setOption4(){
      var data = [ 900, 345, 393, -108, -154, 135, 178, 286, -119, -361, -203 ];
      var help = [];
      var positive = [];
      var negative = [];
      for (var i = 0, sum = 0; i < data.length; ++i) {
        if (data[i] >= 0) {
          positive.push(data[i]);
          negative.push('-');
        } else {
          positive.push('-');
          negative.push(-data[i]);
        }
        this.option4.series[1].data = positive
        this.option4.series[2].data = negative
        if (i === 0) {
          help.push(0);
        } else {
          sum += data[i - 1];
          if (data[i] < 0) {
            help.push(sum + data[i]);
          } else {
            help.push(sum);
          }
        }
        this.option4.series[0].data = help,
        this.$refs.mychart4.chart.setOption(this.option4);
      }
    },

    makeRandomData() {
      return [
        {
          value: Math.random(),
          name: 'A'
        },
        {
          value: Math.random(),
          name: 'B'
        },
        {
          value: Math.random(),
          name: 'C'
        }
      ];
    }
  }
}
</script>
<style lang="scss" scoped>
@function companyW($num) {
  @return ($num * 100)/1920;
}

@function companyH($num) {
  @return ($num * 100)/1080;
}
.home {
  width: companyW(1920vw);
  height: companyH(1080vh);
  position: relative;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;


  .my-chart {
    width: 48%;
    height: 48%;
    // background-color: pink;
  }
}
</style>
